<template>
  <div class="report">
    <report-header />
    <div class="report-body">
      <!-- 查询 -->
      <div class="search">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="合作商：">
            <el-select v-model="formInline.partners" placeholder="请选择">
              <el-option v-for="item in PartnerList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="日期：">
            <el-date-picker
              v-model="formInline.data"
              type="daterange"
              align="right"
              range-separator="~"
              prefix-icon="el-icon-date"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :clearable="false"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="background-color: #5f84ff;"><i class="el-icon-search" @click="onSubmit" />查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 总数据展示 -->
      <div class="stats">
        <span class="label">笔数统计：</span>&nbsp;&nbsp;
        <span class="value">{{ sales }}</span>&nbsp;&nbsp;
        <span class="unit">个</span>
        <span class="label">收入统计：</span>&nbsp;&nbsp;
        <span class="value">{{ saleroom }}</span>&nbsp;&nbsp;
        <span class="unit">元</span>
        <span class="label">分成统计：</span>&nbsp;&nbsp;
        <span class="value">{{ dividedInto }}</span>&nbsp;&nbsp;
        <span class="unit">元</span>
      </div>
      <div class="result">
        <!-- 具体表格 -->
        <el-table
          :data="summaryData"
          style="width: 100%"
          :header-cell-style="header"
          empty-text="暂无数据"
        >
          <el-table-column prop="date" label="订单信息" />
          <el-table-column prop="ownerName" label="合作商" />
          <el-table-column prop="ratio" label="分成比例" />
          <el-table-column prop="orderTotalMoney" label="收入（元）" />
          <el-table-column prop="orderCount" label="笔数" />
          <el-table-column prop="totalBill" label="分成金额（元）" />
        </el-table>
        <!-- 分页 -->
        <el-row type="flex" justify="end" align="middle" style="height:60px">
          <el-pagination
            background
            :hide-on-single-page="value"
            :current-page.sync="summary.pageIndex"
            :page-size.sync="summary.pageSize"
            :page-sizes="[2,5,10,20,100]"
            layout="total, sizes,pager, prev, next"
            :total="total"
            prev-text="上一页"
            next-text="下一页"
          />
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import ReportHeader from './components/reportHeader.vue'
import { getPartnerSearchAPI } from '@/api/point'
import {
  getOrderCountAPI,
  getOrderAmountAPI,
  getTotalBillAPI,
  getPartnerCollectAPI
} from '@/api/reconciliation'
import {
  timeStart,
  monthDetailStart,
  timeEnd,
  monthDetailEnd,
  summaryTime,
  monthRungStart,
  monthRungEnd
} from '@/utils/dayjs'
export default {
  name: '',
  components: { ReportHeader },
  props: {},
  data() {
    return {
      sales: 0,
      saleroom: 0,
      dividedInto: 0,
      time: {
        partnerId: null,
        start: monthDetailStart,
        end: monthDetailEnd
      },
      summary: {
        pageIndex: 1,
        pageSize: 10,
        partnerName: null,
        start: monthRungStart,
        end: monthRungEnd
      },
      total: 0,
      value: true,
      summaryData: [],
      formInline: {
        partners: '',
        data: [monthRungStart, monthRungEnd]
      },
      PartnerList: []
    }
  },
  computed: {
  },
  watch: {},
  created() {
    this.getCountAmountTotalBill()
    this.getPartnerCollect()
    this.getPartnerSearch()
  },
  mounted() {},
  methods: {
    // 获取一定时间范围之内的订单总数,销售额，分成
    async getCountAmountTotalBill() {
      try {
        const resSales = await getOrderCountAPI(this.time)
        const resSaleroom = await getOrderAmountAPI(this.time)
        const resDividedInto = await getTotalBillAPI(this.time)
        this.sales = resSales.data
        this.saleroom = (resSaleroom.data / 100).toFixed(2)
        this.dividedInto = (resDividedInto.data / 100).toFixed(2)
      } catch (error) {
        console.log(error)
      }
    },
    // 获取一定日期范围之内的合作商分成汇总数据
    async getPartnerCollect() {
      try {
        const { data } = await getPartnerCollectAPI(this.summary)
        this.summaryData = data.currentPageRecords.map(item => {
          item.ratio = `${item.ratio}%`
          item.orderTotalMoney = `+${(item.orderTotalMoney / 100).toFixed(2)}`
          item.totalBill = `+${(item.totalBill / 100).toFixed(2)}`
          return item
        })
        this.total = +data.totalCount
        if (data.totalCount > 0 && data.currentPageRecords.length === 0) {
          this.summary.pageIndex--
          this.getPartnerCollect()
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 合作商搜索
    async getPartnerSearch() {
      try {
        const { data } = await getPartnerSearchAPI({ pageIndex: 1, pageSize: 100000 })
        this.PartnerList = data.currentPageRecords
      } catch (error) {
        console.log(error)
      }
    },
    // 搜索
    onSubmit() {
      this.time.start = timeStart(this.formInline.data[0])
      this.time.end = timeEnd(this.formInline.data[1])
      this.time.partnerId = this.formInline.partners
      this.getCountAmountTotalBill()
      this.summary.start = summaryTime(this.formInline.data[0])
      this.summary.end = summaryTime(this.formInline.data[1])
      const res = this.PartnerList.find(item => item.id === this.formInline.partners)
      this.summary.partnerName = res.name
      this.getPartnerCollect()
    },
    // 表头样式
    header() {
      return '{line-height: 1.15;padding: 10px 0px 9px;background: rgb(243, 246, 251);font-weight: 500;text-align: left;color: rgb(102, 102, 102);}'
    }
  }
}
</script>
<style lang="scss">
.search {
  .el-form-item {
    margin-bottom: unset;
  }
}
</style>
<style scoped lang='scss'>
.report {
  .report-body {
    background-color: #fff;
    .search {
      display: flex;
      height: 64px;
      -webkit-box-align: center;
      align-items: center;
      padding-left: 17px;
      background-color: #fff;
    }
    .stats {
    background-color: #fff;
    padding: 10px 0 0 18px;
    }
    .result {
    padding: 20px 15px 19px 17px;
    background-color: #fff;
    }
    .label {
      font-size: 14px;
      color:#333;
      font-weight: 500;
    }
    .value {
      font-size: 20px;
      color: #ff5757;
      font-weight: 500;
    }
    .unit {
      font-size: 12px;
      margin-right: 50px;
      color:#000;
    }
  }
}
</style>
